<template>
  <div class="diary-container">
    <!-- 日期和天气输入 -->
    <div class="diary-header">
      <label for="diary-date">日期:</label>
      <input type="date" v-model="diaryDate" id="diary-date" />

      <label for="diary-weather">天气:</label>
      <select v-model="diaryWeather" id="diary-weather">
        <option value="晴天">晴天</option>
        <option value="多云">多云</option>
        <option value="阴天">阴天</option>
        <option value="雨天">雨天</option>
        <option value="雪天">雪天</option>
        <!-- 可以添加更多天气选项 -->
      </select>
    </div>

    <!-- Quill 富文本编辑器 -->
    <div id="editor-container"></div>

    <!-- 保存按钮 -->
    <button @click="saveDiary">保存日记</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Quill from 'quill';

export default {
  setup() {
    const diaryDate = ref(new Date().toISOString().slice(0, 10)); // 初始化为当前日期
    const diaryWeather = ref('晴天'); // 初始化为默认天气选项
    const quillEditor = ref(null);

    onMounted(() => {
      // 初始化 Quill 编辑器
      quillEditor.value = new Quill('#editor-container', {
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
            [{ direction: 'rtl' }], // text direction
            [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            ['clean'], // remove formatting button
          ],
        },
      });
    });

    const saveDiary = () => {
      const diaryContent = quillEditor.value.root.innerHTML; // 获取编辑器内容
      const diaryData = {
        date: diaryDate.value,
        weather: diaryWeather.value,
        content: diaryContent,
      };

      // 打印到控制台（实际应用中应保存到服务器或本地存储）
      console.log('保存的日记:', diaryData);

      // 这里可以实现数据的存储，例如发送到服务器或存储在本地
    };

    return {
      diaryDate,
      diaryWeather,
      saveDiary,
    };
  },
};
</script>

<style>
@import 'quill/dist/quill.snow.css'; /* 导入 Quill 编辑器样式 */

.diary-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.diary-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.diary-header label {
  margin-right: 10px;
}

#editor-container {
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}
</style>
